<template>
    <div>
        <!--对数据做查询-->
        <el-row>
            <el-form :inline="true" :model="formInline" ref="formInline" class="demo-form-inline">
                <el-form-item label="日志ID">
                    <el-input v-model="formInline.operId" placeholder="角色ID"></el-input>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="onSubmit">查询</el-button>
                    <el-button @click="resetForm">重置</el-button>
                </el-form-item>
            </el-form>
        </el-row>
        <!--表格内容-->
        <el-row>
            <el-table
                    :data="tableData"
                    style="width: 100%" border>
                <el-table-column
                        prop="operId"
                        label="日志ID">
                </el-table-column>
                <el-table-column
                        prop="title"
                        label="模块标题">
                </el-table-column>
                <el-table-column
                        prop="businessType"
                        label="业务类型"
                        :formatter="businessStatus">
                </el-table-column>
                <el-table-column
                        prop="method"
                        label="方法名称">
                </el-table-column>
                <el-table-column
                        prop="operatorType"
                        label="操作类别"
                        :formatter="operatorStatus">
                </el-table-column>
                <el-table-column
                        prop="operName"
                        label="操作人员">
                </el-table-column>
                <el-table-column
                        prop="deptName"
                        label="部门名称">
                </el-table-column>
                <el-table-column
                        prop="operUrl"
                        label="请求URL">
                </el-table-column>
                <el-table-column
                        prop="operIp"
                        label="主机地址">
                </el-table-column>
                <el-table-column
                        prop="operLocation"
                        label="操作地点">
                </el-table-column>
                <el-table-column
                        prop="operParam"
                        label="请求参数">
                </el-table-column>
                <el-table-column
                        prop="status"
                        label="操作状态"
                        :formatter="status">
                </el-table-column>
                <el-table-column
                        prop="errorMsg"
                        label="错误信息">
                </el-table-column>
                <el-table-column
                        prop="operTime"
                        label="操作时间">
                </el-table-column>
            </el-table>
        </el-row>
        <!--分页定义-->
        <el-row>
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="currentPage"
                    :page-sizes="[3,5,10,20,30,50]"
                    :page-size="pageSize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </el-row>
    </div>
</template>

<script>
    export default {
        data() {
            return {
                tableData: [],
                currentPage: 1,//当前页
                total: 100, //总数据量
                formInline: {operId: ''},
                pageSize: 5,//每页数据量
            }
        },
        // 初始化数据  mounted()
        created: function () {
            this.loadData();
        },
        methods: {
            //封装数据请求
            loadData() {
                var _this = this;
                this.$http.post("/ss/operLog/queryAll?pageNo=" + this.currentPage + "&pageSize=" + this.pageSize, this.formInline).then((response) => {
                    _this.tableData = response.data.t.list;
                    _this.total = response.data.t.total;

                })
            },
            //分页 每页数量变化时处理
            handleSizeChange(val) {
                this.pageSize = val;
                this.loadData();
            },
            //分页 第几页变化时处理
            handleCurrentChange(val) {
                this.currentPage = val;
                this.loadData();
            },
            //点击查询方法
            onSubmit() {
                this.currentPage = 1;
                this.loadData();
            },
            //判断角色状态
            businessStatus(row) {
                if(row.businessType === 1) {
                    return "新增"
                }else if(row.businessType === 2) {
                    return "修改"
                }else if(row.businessType === 3) {
                    return "删除"
                }else{
                    return "其他"
                }
            },
            operatorStatus(row){
                if(row.operatorType === 1) {
                    return "后台用户"
                }else if(row.operatorType === 2) {
                    return "手机端用户"
                }else {
                    return "其他"
                }
            },
            status(row){
                if(row.status === 0) {
                    return "正常"
                }else{
                    return "异常"
                }
            },
            //重置表单
            resetForm() {
                this.formInline = {};
                this.loadData();
            },
        }

    }
</script>

<style scoped>

</style>